<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自律助手</title>
    <!-- 原有引用保留 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=你的高德JSAPIKey&plugins=Weather"></script>
    <link rel="stylesheet" href="../css/style.css">
    <!-- <link rel="stylesheet" href="../css/snake.css"> -->
    <!-- 新增天气样式 -->
    <!-- <link rel="stylesheet" href="../css/weather.css"> -->
</head>

<body>
    <!-- 全局提醒面板 -->
    <div id="reminder-panel" class="reminder-panel">
        <h3>📌 待办提醒</h3>
        <div id="reminder-list" class="reminder-list">
            <!-- 这里会自动显示未完成的待办 -->
        </div>
        <button id="reminder-close">关闭</button>
    </div>
    <div class="app-container">
        <!-- 导航栏（不变） -->
        <nav class="module-nav">
            <ul>
                <li><button onclick="switchModule('todo')">待办清单</button></li>
                <li><button onclick="switchModule('timer')">番茄钟</button></li>
                <li><button onclick="switchModule('calendar')">日历</button></li>
                <li><button onclick="switchModule('stats')">数据统计</button></li>
                <li><button onclick="switchModule('weather')">天气查询</button></li>
                <li><button onclick="switchModule('music')">本地音乐</button></li>
                <li><button onclick="switchModule('game')">轻松一刻</button></li>
            </ul>
        </nav>

        <!-- 模块容器（每个元素ID带模块前缀） -->
        <div class="module-container">
            <!-- 1. 待办清单模块 -->
            <div id="todo-module" class="module active">
                <h2>待办清单</h2>
                <div class="todo-container">
                    <input type="text" id="todo-input" placeholder="添加新待办...">
                    <button id="todo-add-btn">添加</button>
                    <ul id="todo-list"></ul>
                </div>
            </div>

            <!-- 2. 番茄钟模块 -->
            <div id="timer-module" class="module">
                <h2>番茄钟</h2>
                <div class="timer-container">
                    <div id="timer-display">25:00</div>
                    <button id="timer-start">开始</button>
                    <button id="timer-pause">暂停</button>
                    <button id="timer-reset">重置</button>
                </div>
            </div>

            <!-- 3. 日历模块 -->
            <div id="calendar-module" class="module">
                <h2>日历</h2>
                <div class="calendar-container">
                    <div id="calendar-header">2024年10月</div>
                    <div id="calendar-grid"></div>
                </div>
            </div>

            <!-- 4. 数据统计模块 -->
            <div id="stats-module" class="module">
                <h2>数据统计</h2>
                <div class="stats-container">
                    <canvas id="stats-chart" width="400" height="200"></canvas>
                </div>
            </div>

            <!-- 5. 天气查询模块 -->
            <div id="weather-module" class="module">
                <h2>天气查询</h2>
                <div class="card">
                    <div class="input-group">
                        <input id="weather-city" type="text" placeholder="请输入城市名">
                        <button id="weather-search">查询</button>
                    </div>
                </div>
                <div id="weather-result"></div>
            </div>

            <!-- 6. 本地音乐模块 -->
            <div id="music-module" class="module">
                <h2>本地音乐</h2>
                <div class="music-container">
                    <input type="file" id="music-file" accept="audio/*">
                    <audio id="music-player" controls></audio>
                    <button id="music-play">播放</button>
                    <button id="music-pause">暂停</button>
                </div>
            </div>

            <!-- 7. 轻松一刻（贪吃蛇）模块 -->
            <!-- 7. 轻松一刻（多游戏）模块 -->
            <div id="game-module" class="module">
                <h2>轻松一刻 · 小游戏合集</h2>

                <!-- 游戏选择器 -->
                <div class="game-selector">
                    <button class="game-btn active" data-game="snake">贪吃蛇</button>
                    <button class="game-btn" data-game="tetris">俄罗斯方块</button>
                    <button class="game-btn" data-game="2048">2048</button>
                </div>

                <!-- 游戏内容容器 -->
                <div class="game-content">
                    <!-- 贪吃蛇游戏（原有内容） -->
                    <div class="game-item snake-game active">
                        <canvas id="snake-canvas" width="400" height="400"></canvas>
                        <div class="snake-controls">
                            <p>分数：<span id="snake-score">0</span></p>
                            <button id="snake-start">开始游戏</button>
                            <button id="snake-pause">暂停</button>
                            <button id="snake-reset">重置</button>
                            <p>操作：↑↓←→ 方向键控制</p>
                        </div>
                    </div>

                    <!-- 俄罗斯方块游戏 -->
                    <div class="game-content game-item tetris-game">
                        <canvas id="tetris-canvas" width="300" height="600"></canvas>
                        <div class="tetris-info">
                            <div>分数：<span id="tetris-score">0</span></div>
                            <div>行数：<span id="tetris-lines">0</span></div>
                            <button id="tetris-start">开始</button>
                            <button id="tetris-pause">暂停</button>
                            <button id="tetris-reset">重置</button>
                            <p>操作：↑旋转 ←→移动 ↓加速下落 空格直接落地</p>
                        </div>
                    </div>

                    <!-- 2048游戏（新增） -->
                    <div class="game-item 2048-game">
                        <!-- 2048内容 -->
                        <div id="2048-container"></div>
                        <!-- 其他控制元素 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本引用（顺序：工具类→模块JS→main.js） -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="../js/todo.js"></script>
    <script src="../js/timer.js"></script>
    <script src="../js/calender.js"></script>
    <script src="../js/stats.js"></script>
    <script src="../js/weather.js"></script>
    <script src="../js/music.js"></script>
    <script src="../js/snake.js"></script>
    <script src="../js/tetris.js"></script>
    <script src="../js/main.js"></script>
   
</body>

</html>